<!DOCTYPE html >
<html style="height: 100%;">
    <head>
        <title>编辑器</title>
        <link rel="icon" href="./favicon-b.ico" type="image/x-icon">
        <link rel="stylesheet" href="./common/common.css">
        <script src="./js/index.js"></script>
        <script src="./common/common.js"></script>
        
    </head>
    <body  style="height: 100%;" >
        <div id="app" style="height: 100%;" @mouseup="endChangeWindow()"  @mousemove="changeWindowSize($event)">
            <el-container style="height: 100%;">
                <el-header >Header</el-header>
                <el-container>
                    <el-aside :style="leftWidth" >
                    </el-aside>
                  <el-container>
                    <el-container>
                        <el-main style="padding: 0px;">
                            <canvas id="demoCanvas" width="800" height="500" style="border:1px solid #000000;"></canvas>
                            <div class="changeWindowWitdhSizeDiv" ondragstart="return false;" ondrop="return false;" :style="leftWidthDivStyle" @mousedown="startChangeLeftWindow($event)"></div>
                            
                        </el-main>
                        <el-aside width="200px">Aside</el-aside>
                    </el-container>
                    <el-footer style="padding: 0px;">
                        <div class="changeWindowWitdhSizeDiv" :style="leftWidthDivStyle" @mousedown="startChangeLeftWindow($event)"></div>
                        Footer
                    </el-footer>
                  </el-container>
                  
                </el-container>
            </el-container>              
        </div>
    </body>
    <script>

        var changeLeftWindow = false;
        var app2;
        onload=function(){

            var app = new Vue({
                el: '#app',
                data: {
                    message: 'Hello Vue!',
                    leftWidth :{
                        width:"300px"
                    },
                    leftWidthDivStyle:{
                        background:whSizeDivUpColor
                    }
                },
                methods:{
                    startChangeLeftWindow:function(e){
                        changeLeftWindow = true;
                        this.leftWidth.width=(e.x-2)+"px";
                        this.leftWidthDivStyle.background=whSizeDivDownColor;
                        console.log("startChangeLeftWindow")
                        document.onmousemove = (e) => {
                            if(changeLeftWindow){
                                this.leftWidth.width=(e.x)+"px";
                            }
                        };
                    },
                    endChangeWindow:function(){
                        changeLeftWindow = false;
                        console.log("endChangeWindow")
                        this.leftWidthDivStyle.background=whSizeDivUpColor;
                        resizeCanvas();
                    },
                    changeWindowSize:function(e){
                        //console.log(changeLeftWindow)
                        if(changeLeftWindow){
                            //this.leftWidth.width=(e.x-2)+"px";
                            
                        }
                    }
                }
            })

            /*记录鼠标位置*/ 
            getMouseXy();
            /*画布自适应*/ 
            resizeCanvas();
            /*画布自适应事件*/ 
            $(window).resize(resizeCanvas);
            
        }
    </script>
</html>